<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monthly Sales Chart</title>
<script
	src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
</head>
<body>
	<div id="bar" style="width: 1000px; height: 800px;"></div>
	<script>  
          
	const allMonths = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);  
	console.info(allMonths);  
	  
	const option = { 
   	  title: {  
        text: '每月销售额',  
        subtext: '',  
        left: 'center'  
	  }, 
	  xAxis: {  
	    type: 'category',  
	    data: []  
	  },  
	  yAxis: {  
	    type: 'value'  
	  },  
	  series: [  
	    {  
	      data: [],  
	      type: 'bar',  
	      showBackground: true,  
	      backgroundStyle: {  
	        color: 'rgba(180, 180, 180, 0.2)'  
	      }  
	    }  
	  ]  
	};  
	  
	var chartDom = document.getElementById('bar');  
	var myChart = echarts.init(chartDom);  
	  
	fetch("../../order/monthdata")  
	  .then(response => {  
	    if (!response.ok) {  
	      throw new Error('Network response was not ok');  
	    }  
	    return response.json();  
	  })  
	  .then(data => {  
	    const monthData = data;
	    const monthPriceMap = new Map(monthData.map(item => [  
	      `${parseInt(item.month.split('-')[1], 10)}月`,  
	      item.total_price  
	    ]));  
	  
	    const totalPrices = new Array(allMonths.length).fill(0);  
	  
	    allMonths.forEach((month, index) => {  
	      if (monthPriceMap.has(month)) {  
	        totalPrices[index] = monthPriceMap.get(month);  
	      }   
	    });  
	  
	    option.xAxis.data = allMonths;  
	    option.series[0].data = totalPrices;  
	  
	    myChart.setOption(option);  
	  });  
    </script>
</body>
</html>